import React, { Component } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomButton from '../button/CustomButton'

export default class BorderTag extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isActive: props.isActive,
      switchType: props.switchType
    }
  }

  UNSAFE_componentWillReceiveProps (nexProps) {
    if (this.state.isActive !== nexProps.isActive) {
      this.setState({
        isActive: nexProps.isActive
      })
    }
  }

  render () {
    const { tagLabel, style, activeLabelColor, activeBorderColor, labelColor, borderColor, params } = this.props
    const { isActive } = this.state
    return tagLabel ? (
      <CustomButton
        style={[styles.tagView, { borderColor: isActive ? activeBorderColor : borderColor }].concat(style)}
        onPress={this._onPress}
        params={params}>
        <Text style={[styles.tagText, { color: isActive ? activeLabelColor : labelColor }]}>{tagLabel}</Text>
      </CustomButton>
    ) : null
  }

  _onPress = (params) => {
    const { switchType } = this.props
    const { isActive } = this.state
    const active = !isActive
    switch (switchType) {
      case 'toggle':
        this._setActive(active, params)
        break
      case 'open':
        active && this._setActive(active, params)
        break
      case 'close':
        !active && this._setActive(active, params)
        break
    }
  }

  _setActive = (active, params) => {
    const { onPress } = this.props
    this.setState({
      isActive: active
    }, () => {
      onPress && onPress(active, params)
    })
  }
}
BorderTag.propTypes = {
  tagLabel: PropTypes.string,
  activeLabelColor: PropTypes.string,
  activeBorderColor: PropTypes.string,
  labelColor: PropTypes.string,
  borderColor: PropTypes.string,
  isActive: PropTypes.bool,
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  onPress: PropTypes.func,
  params: PropTypes.object
}
BorderTag.defaultProps = {
  activeLabelColor: '#FFC200',
  activeBorderColor: '#FFC200',
  labelColor: '#666666',
  borderColor: '#CCCCCC'
}

const styles = StyleSheet.create({
  tagView: {
    width: ScaleS(70),
    height: ScaleS(33),
    borderStyle: 'solid',
    borderRadius: ScaleS(5),
    borderWidth: ScaleS(1),
    alignItems: 'center',
    justifyContent: 'center'
  },
  tagText: {
    fontSize: ScaleT(14),
    fontWeight: '400'
  }
})
